<!-- tab菜单 -->

<template>
  <div class="tab">
    <div
      class="header-total"
      v-if="
        route.name == 'home' ||
          route.name == 'alert' ||
          (route.name == 'itPage' && animate)
      "
    >
      <div class="header-total-group">
        <div class="header-total-item eq">
          <div class="icon-box">
            <div class="title">{{ HomeEquipmentDetailData.title }}</div>
            <div class="progress-icon">
              <img :src="requireImgUrl('image', '设备总数')" alt="" />
            </div>
          </div>
          <div class="info">
            <div class="number">
              <CountUp :end-val="HomeEquipmentDetailData.total"></CountUp>
            </div>
            <div class="linestatus">
              在线:&nbsp;<span>{{ HomeEquipmentDetailData.online }}</span>
            </div>
            <div class="linestatus">
              离线:&nbsp;<span>
                {{ HomeEquipmentDetailData.outline }}
              </span>
            </div>
          </div>
        </div>
        <div class="header-total-item monitor">
          <div class="icon-box">
            <div class="title">{{ MonitorDetalData.title }}</div>
            <div class="progress-icon">
              <img :src="requireImgUrl('image', '监控')" alt="" />
            </div>
          </div>
          <div class="info">
            <div class="number">
              <CountUp :end-val="MonitorDetalData.total"></CountUp>
            </div>
            <div class="linestatus">
              在线:&nbsp;<span>
                {{ MonitorDetalData.online }}
              </span>
            </div>
            <div class="linestatus">
              离线:&nbsp;<span>
                {{ MonitorDetalData.outline }}
              </span>
            </div>
          </div>
        </div>
        <div class="header-total-item broadcast">
          <div class="icon-box">
            <div class="title">{{ BroadcastDetail.title }}</div>
            <div class="progress-icon">
              <img :src="requireImgUrl('image', '广播')" alt="" />
            </div>
          </div>
          <div class="info">
            <div class="number">
              <CountUp :end-val="BroadcastDetail.total"></CountUp>
            </div>
            <div class="linestatus">
              在线:&nbsp;<span>
                {{ BroadcastDetail.online }}
              </span>
            </div>
            <div class="linestatus">
              离线:&nbsp;<span>
                {{ BroadcastDetail.outline }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { requireImgUrl } from "@/utils/localurl/metaUrl";
import { NewGeneral, getEqIDs } from "@/api/screen/equipment";
import { useAnimateStore } from "@/stores/animate";
import { UseTab } from "@/stores/tab";
import { UseLocation } from "@/stores/location";
import { useIds } from "@/stores/screen/ids";
import pLimit from "p-limit";
const { getsessionStorage } = useIds();
const animatestore = useAnimateStore();
const animate = computed(() => animatestore.$state.Animate);
const tab = UseTab();
const route = useRoute();
const location = UseLocation();
const currentIndex = ref(0);
const percentage1 = ref(0);
const percentage2 = ref(0);
const percentage3 = ref(0);
const HomeEquipmentDetailData = ref({
  title: "设备总数",
  total: 0,
  online: 0,
  outline: 0,
});

const MonitorDetalData = ref({
  title: "监控总数",
  total: 0,
  online: 0,
  outline: 0,
});

const BroadcastDetail = ref({
  title: "广播总数",
  total: 0,
  online: 0,
  outline: 0,
});

// 获取当前位置index
const locationIndex = computed(() => {
  return location.$state.LocationIndex;
});

const getHomeEquipmentDetail = async (config) => {
  HomeEquipmentDetailData.value = {
    title: "设备总数",
    total: 0,
    online: 0,
    outline: 0,
  };
  let res = (await NewGeneral(config)) as any;
  if (res.code == 200) {
    HomeEquipmentDetailData.value.total =
      res.data["HOME_EQUIPMENT_TOTAL"] && res.data["HOME_EQUIPMENT_TOTAL"].data;
    HomeEquipmentDetailData.value.online =
      res.data["ONLINE_EQUIPMENT"] && res.data["ONLINE_EQUIPMENT"].data;
    HomeEquipmentDetailData.value.outline =
      res.data["OFFLINE_EQUIPMENT"] && res.data["OFFLINE_EQUIPMENT"].data;
    percentage1.value =
      (HomeEquipmentDetailData.value.online /
        HomeEquipmentDetailData.value.total) *
      100;
  }
};

const getMonitorDetal = async (config) => {
  MonitorDetalData.value = {
    title: "监控总数",
    total: 0,
    online: 0,
    outline: 0,
  };
  let res = (await NewGeneral(config)) as any;
  if (res.code == 200) {
    MonitorDetalData.value.total =
      res.data["PRIMARY_DEVICE_METRICS_MONITOR_VIDEO"] &&
      res.data["PRIMARY_DEVICE_METRICS_MONITOR_VIDEO"].data;
    MonitorDetalData.value.online =
      res.data["PRIMARY_DEVICE_METRICS_ONLINE"] &&
      res.data["PRIMARY_DEVICE_METRICS_ONLINE"].data;
    MonitorDetalData.value.outline =
      res.data["PRIMARY_DEVICE_METRICS_OFFLINE"] &&
      res.data["PRIMARY_DEVICE_METRICS_OFFLINE"].data;
    percentage2.value =
      (MonitorDetalData.value.online / MonitorDetalData.value.total) * 100;
  }
};

const getBroadcast = async (config) => {
  BroadcastDetail.value = {
    title: "广播总数",
    total: 0,
    online: 0,
    outline: 0,
  };
  let res = (await NewGeneral(config)) as any;
  if (res.code == 200) {
    BroadcastDetail.value.total =
      res.data["BROADCAST_DEVICE_COUNT"] &&
      res.data["BROADCAST_DEVICE_COUNT"].data;
    BroadcastDetail.value.online =
      res.data["BROADCAST_DEVICE_COUNT_ONLINE"] &&
      res.data["BROADCAST_DEVICE_COUNT_ONLINE"].data;
    BroadcastDetail.value.outline =
      res.data["BROADCAST_DEVICE_COUNT_ONLINE"] &&
      res.data["BROADCAST_DEVICE_COUNT_ONLINE"].data;
    percentage3.value =
      (BroadcastDetail.value.online / BroadcastDetail.value.total) * 100;
  }
};
const tabIndex = computed(() => {
  return tab.$state.Tab;
});

watch(
  () => tabIndex.value,
  (newVal) => {
    currentIndex.value = newVal;
  },
  { deep: true, immediate: true }
);

const initData = async () => {
  // let res: any = await getEqIDs("ALL");
  // let ids = getsessionStorage();
  // //code是怎么对接后端？
  // if (ids) {
  //   const eqconfig = [
  //     {
  //       code: "HOME_EQUIPMENT_TOTAL",
  //       params: {
  //         equipmentIds: ids,
  //       },
  //     },
  //     {
  //       code: "ONLINE_EQUIPMENT",
  //       params: {
  //         equipmentIds: ids,
  //       },
  //     },
  //     {
  //       code: "OFFLINE_EQUIPMENT",
  //       params: {
  //         equipmentIds: ids,
  //       },
  //     },
  //   ];

  //   const monitorConfig = [
  //     {
  //       code: "PRIMARY_DEVICE_METRICS_MONITOR_VIDEO",
  //       params: {
  //         equipmentIds: ids,
  //       },
  //     },
  //     {
  //       code: "PRIMARY_DEVICE_METRICS_ONLINE",
  //       params: {
  //         equipmentIds: ids,
  //       },
  //     },
  //     {
  //       code: "PRIMARY_DEVICE_METRICS_OFFLINE",
  //       params: {
  //         equipmentIds: ids,
  //       },
  //     },
  //   ];

  //   const broadcastConfig = [
  //     {
  //       code: "BROADCAST_DEVICE_COUNT",
  //       params: {
  //         equipmentIds: ids,
  //       },
  //     },
  //     {
  //       code: "BROADCAST_DEVICE_COUNT_ONLINE",
  //       params: {
  //         equipmentIds: ids,
  //       },
  //     },
  //     {
  //       code: "BROADCAST_DEVICE_COUNT_OFFLINE",
  //       params: {
  //         equipmentIds: ids,
  //       },
  //     },
  //   ];
  //   //并发
  //   const limit = pLimit(1);
  //   //获取 首页3个统计数据
  //   const input = [
  //     limit(() => getHomeEquipmentDetail(eqconfig)),
  //     limit(() => getMonitorDetal(monitorConfig)),
  //     limit(() => getBroadcast(broadcastConfig)),
  //   ];
  //   Promise.all(input);
  // }
};
onMounted(() => {
  // initData();
});
</script>

<style scoped lang="scss">
.tab {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .header-total {
    width: clamp(63.25rem, 52.71vw, 126.5rem);
    height: clamp(9.125rem, 7.6vw, 18.25rem);
    margin-bottom: clamp(1.25rem, 1.04vw, 2.5rem);
    border-radius: 10px;

    .header-total-group {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .header-total-item {
        width: clamp(12.5rem, 10.42vw, 25rem);
        height: clamp(6.875rem, 5.73vw, 13.75rem);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          margin-bottom: 10px;
          color: rgba(159, 226, 255, 1);
          font-size: clamp(1rem, 0.83vw, 2rem);
        }

        .icon-box {
          width: 96px;
          height: 96px;

          .title {
            color: rgba(159, 226, 255, 1);
          }

          .progress-icon {
            width: clamp(4.25rem, 3.54vw, 8.5rem);
            height: clamp(4.25rem, 3.54vw, 8.5rem);
            display: flex;
            align-items: center;
            justify-content: center;

            :deep(.el-progress path:first-child) {
              // 修改进度条背景色
              stroke: rgba(38, 190, 255, 0.4);
            }
          }

          .outsided {
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            transform-origin: center;
            animation: outside 1.5s linear infinite;
          }
        }

        .info {
          width: clamp(6.25rem, 5.21vw, 12.5rem);
          height: 100%;

          color: white;
          font-family: DigitalNumbers;
          font-weight: 400;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .title {
            font-size: clamp(1.125rem, 0.94vw, 2.25rem);
          }

          .number {
            font-size: clamp(2.5rem, 2.08vw, 5rem);
            font-weight: bold;
            margin-bottom: clamp(0.375rem, 0.31vw, 0.75rem);
          }

          .linestatus {
            display: flex;
            height: clamp(1.5rem, 1.25vw, 3rem);
            align-items: center;

            &:nth-child(3) {
              color: rgba(204, 204, 204, 1);
            }

            span {
              font-size: clamp(1.125rem, 0.94vw, 2.25rem);
              letter-spacing: 3px;
            }
          }
        }

        &.eq {
          .icon-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .progress-icon {
              :deep(.el-progress path:first-child) {
                // 修改进度条背景色
                stroke: rgba(102, 204, 204, 0.2);
              }
            }
          }

          .info {
          }
        }

        &.monitor {
          .icon-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .progress-icon {
              :deep(.el-progress path:first-child) {
                // 修改进度条背景色
                stroke: rgba(255, 175, 101, 0.2);
              }
            }
          }
        }

        &.broadcast {
          .icon-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .progress-icon {
              :deep(.el-progress path:first-child) {
                // 修改进度条背景色
                stroke: rgba(255, 207, 38, 0.24);
              }
            }
          }
        }
      }
    }
  }

  .tab-box {
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 10px;

    .tab-item {
      width: clamp(5rem, 4.17vw, 10rem);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      background-color: rgba(12, 57, 77, 0.6);
      color: rgba(200, 238, 255, 1);
      cursor: pointer;
      font-size: clamp(0.875rem, 0.73vw, 1.75rem);
      height: clamp(2rem, 1.67vw, 4rem);
    }

    .currentTab {
      position: absolute;
      width: clamp(4.5rem, 3.75vw, 9rem);
      height: clamp(2.5rem, 2.08vw, 5rem);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .tab-text {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tab-mak {
      background: url("../../assets/image/tab选中.png") center no-repeat;
      width: clamp(4.5rem, 3.75vw, 9rem);
    }
  }

  @keyframes outside {
    0% {
      transform: translate(-50%, -50%) rotate(0);
    }

    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  // 屏幕大于 1024px 或小于 1440px 时应用该样式
  @media screen and (min-width: 1024px) and (max-width: 1590px) {
    .header-total {
      width: 650px;
    }
  }

  @media screen and (max-width: 1480px) {
    .header-total {
      width: 550px;
    }
  }
}
</style>
